<template>
	<view class="page">
			<!-- tab栏切换动态改变激活样式 -->
			<view class="nav">
				<view class="nav-list" v-for="(item,index) in list" :key="item.id" @tap="changeAct(item)">

					<!-- 激活样式名字是红色 判断act==index 和act==item.id都行-->
					<view :class="[act==index?'name':'']">
						{{item.name}}
					</view>
					<!-- 名字下面的横线 -->
					<view :class="[act==index?'line':'']">
					</view>
				</view>
			</view>
			<!-- 内容的改变 -->
			<view class="wrap">
				<!-- 上拉加载 -->
				<zb-table :columns="column" :data="datas" :stripe="true" :fit="false" :border="true"  @rowClick="rowClick"
					:show-header="true"></zb-table> <!-- :isShowLoadMore="true" :pullUpLoading="loadingData" -->
				<u-loadmore :status="status" :loadmoreText="loadmoreText" @loadmore="loadmore" />
			</view>
		</view>

</template>

<script>
	import {
		toolList
	} from '@/api/common.js';
	import {
		repairList
	} from '@/api/common.js';
	export default {
		data() {
			return {
				// 默认激活样式是第一个
				act: 0,
				list: [{
						id: 0,
						name: '工具库'
					},
					{
						id: 1,
						name: '维修知识库'
					}

				],
				status: 'loadmore',
				loadmoreText: '点击加载更多',
				column: [],
				datas:[],
				page:1,
				pageCount:10,
			};
		},
			onLoad: function(option) {
			// 页面默认显示的是list列表中第一条数据
			this.content()
		},
		onReachBottom() {
			this.status = 'loading';
			console.log('触发上拉加载：' + this.status)
			this.page++;
			this.content()
		},
		methods: {
			loadmore() {
				console.log('触发加载：' + this.status)
				this.page++;
					this.content()
			},
			changeAct(item) {
				// 激活样式是当前点击的对应下标--list中对应id
				this.act = item.id;
				this.datas = []
				this.content()
			},
			rowClick(row, index) {
				console.log(row);
				if(this.act === 0){
					uni.navigateTo({
						url: '/pages/knowledge/tool?item=' + JSON.stringify(row)
					})
				}else{
					uni.navigateTo({
						url: '/pages/knowledge/repair?item=' +JSON.stringify(row)
					})
				}
			},
			loadmore() {
				console.log('触发加载：' + this.status)
			},
			content(){
				// 可以根据点击事件改变内容
				if(this.act === 0){
					this.column = [{
						name: 'manualTitle',
						label: '手册名称',
						fixed: false,
						width: 100,
						emptyString: '--'
					}, {
						name: 'manualContent',
						label: '手册内容',
						fixed: false,
						width: 60,
						emptyString: '--'
					}];
					toolList({
								pageSize: this.pageCount,
								page: this.page
						}).then(res => {
						console.log('查结果: ' + JSON.stringify(res));
						if (res.records.length > 0){
							res.records.forEach(item =>{
								 this.datas.push(item)
							})
						}
						if (res.hasNext == false) {
							this.status = 'nomore';
						}
						}).catch(err => {
						console.log(err);
						uni.showToast({
						title: err,
						icon: 'none'
						});
					})

				}else{
					this.column = [{
						name: 'xianxiang',
						label: '故障现象',
						fixed: false,
						width: 100,
						emptyString: '--'
					}, {
						name: 'cuoshi',
						label: '处理措施',
						fixed: false,
						width: 60,
						emptyString: '--'
					}];
					repairList({
								pageSize: this.pageCount,
								page: this.page
						}).then(res => {
						console.log('查结果: ' + JSON.stringify(res));
						if (res.records.length > 0){
							res.records.forEach(item =>{
								 this.datas.push(item)
							})
						}
						if (res.hasNext == false) {
							this.status = 'nomore';
						}
						}).catch(err => {
						console.log(err);
						uni.showToast({
						title: err,
						icon: 'none'
						});
					})
				}
			},
		},

	}
</script>


<style lang="scss" scoped>
	.nav {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #f5f5f5;
		font-size: 30rpx;
		color: orange;
		letter-spacing: 2.14rpx;
	}

	.nav-list {
		text-align: center;
		width: 160rpx;
		height: 100%;
		margin-top: 40rpx;
		opacity: .9;
	}

	.nav-list .name {
		width: 100%;
		align-items: center;
		color: red;
	}

	.nav-list .line {
		align-items: center;
		margin-top: 10rpx;
			width: 100%;
		height: 4rpx;
		background-color: red;
	}

	/* 内容 */
	.content {
		margin-top: 40rpx;
	}
	.wrap {
		padding-top: 24rpx;
	}
	.message>div>table {
	    border-collapse: collapse;
	    width: 100%;
	    table-layout: fixed;
	}

	td {
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
</style>


